import React,{useState,useEffect,useRef} from 'react'
import ReactDOM from 'react-dom'

export default function Func_demo() {
  const [count,setCount]=useState(0)
  const myRef=useRef()

  function add(){
    setCount(count+1)
  }

  function unmount(){
    ReactDOM.unmountComponentAtNode(document.getElementById('root'))
  }

  function show(){
    alert(myRef.current.value)
  }

  useEffect(()=>{
    let timer=setInterval(()=>{
      setCount(count=>count+1)
    },1000)
    return ()=>clearInterval(timer)
  },[])

  return (
    <div>
      <h2>我是function组件</h2>
      <input type="text" ref={myRef}/>
      <h2>state的值为：{count}</h2>
      <button onClick={add}>点我+1</button>
      <button onClick={unmount}>卸载组件</button>
      <button onClick={show}>点击提示数据</button>
    </div>
  )
}
